import React, { Component } from 'react';
import * as PropTypes from 'prop-types';
import { compose } from 'ramda';
import { createFragmentContainer, graphql } from 'react-relay';
import withStyles from '@mui/styles/withStyles';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
import Divider from '@mui/material/Divider';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Grid from '@mui/material/Grid';
import { AtomVariant, BasketOutline, Translate } from 'mdi-material-ui';
import Chip from '@mui/material/Chip';
import inject18n from '../../../../components/i18n';
import ExpandableMarkdown from '../../../../components/ExpandableMarkdown';
import ItemBoolean from '../../../../components/ItemBoolean';
import StixDomainObjectNestedEntities from '../../common/stix_domain_objects/StixDomainObjectNestedEntities';
import ItemOpenVocab from '../../../../components/ItemOpenVocab';
import StixCoreObjectKillChainPhasesView from '../../common/stix_core_objects/StixCoreObjectKillChainPhasesView';

const styles = (theme) => ({
  paper: {
    margin: '10px 0 0 0',
    padding: '15px',
    borderRadius: 4,
  },
  item: {
    paddingLeft: 10,
    transition: 'background-color 0.1s ease',
    '&:hover': {
      background: 'rgba(0, 0, 0, 0.1)',
    },
  },
  chip: {
    fontSize: 12,
    lineHeight: '12px',
    backgroundColor: theme.palette.background.accent,
    color: theme.palette.text.primary,
    textTransform: 'uppercase',
    borderRadius: 4,
    margin: '0 5px 5px 0',
  },
});

class MalwareDetailsComponent extends Component {
  render() {
    const { t, fldt, classes, malware } = this.props;
    const architectureExecutionEnvs = malware.architecture_execution_envs
      ? malware.architecture_execution_envs
      : [t('Unknown')];
    const implementationLanguages = malware.implementation_languages
      ? malware.implementation_languages
      : [t('Unknown')];
    const capabilities = malware.capabilities
      ? malware.capabilities
      : [t('Unknown')];
    return (
      <>
        <Typography variant="h4" gutterBottom={true}>
          {t('Details')}
        </Typography>
        <Paper classes={{ root: classes.paper }} className={'paper-for-grid'} variant="outlined">
          <Grid container={true} spacing={3} style={{ marginBottom: 10 }}>
            <Grid item xs={6}>
              <Typography variant="h3" gutterBottom={true}>
                {t('Is family')}
              </Typography>
              <ItemBoolean
                status={malware.is_family}
                label={malware.is_family ? t('Yes') : t('No')}
              />
              <Typography
                variant="h3"
                gutterBottom={true}
                style={{ marginTop: 20 }}
              >
                {t('Description')}
              </Typography>
              <ExpandableMarkdown source={malware.description} limit={400} />
              <Typography
                variant="h3"
                gutterBottom={true}
                style={{ marginTop: 20 }}
              >
                {t('Architecture execution env.')}
              </Typography>
              <List>
                {architectureExecutionEnvs.map((architectureExecutionEnv) => (
                  <ListItem
                    key={architectureExecutionEnv}
                    dense={true}
                    divider={true}
                  >
                    <ListItemIcon>
                      <AtomVariant />
                    </ListItemIcon>
                    <ListItemText
                      primary={
                        <ItemOpenVocab
                          type="processor-architecture-ov"
                          value={architectureExecutionEnv}
                        />
                      }
                    />
                  </ListItem>
                ))}
              </List>
              <Typography
                variant="h3"
                gutterBottom={true}
                style={{ marginTop: 20 }}
              >
                {t('Implementation languages')}
              </Typography>
              <List>
                {implementationLanguages.map((implementationLanguage) => (
                  <ListItem
                    key={implementationLanguage}
                    dense={true}
                    divider={true}
                  >
                    <ListItemIcon>
                      <Translate />
                    </ListItemIcon>
                    <ListItemText
                      primary={
                        <ItemOpenVocab
                          type="implementation-language-ov"
                          value={implementationLanguage}
                        />
                      }
                    />
                  </ListItem>
                ))}
              </List>
            </Grid>
            <Grid item xs={6}>
              <Typography variant="h3" gutterBottom={true}>
                {t('Malware types')}
              </Typography>
              {(malware.malware_types && malware.malware_types.length > 0)
                ? malware.malware_types.map((malwareType) => (
                  <Chip
                    key={malwareType}
                    classes={{ root: classes.chip }}
                    label={malwareType}
                  />
                ))
                : ('-')
              }
              <Typography
                variant="h3"
                gutterBottom={true}
                style={{ marginTop: 20 }}
              >
                {t('First seen')}
              </Typography>
              {fldt(malware.first_seen)}
              <Typography
                variant="h3"
                gutterBottom={true}
                style={{ marginTop: 20 }}
              >
                {t('Last seen')}
              </Typography>
              {fldt(malware.last_seen)}
              <StixCoreObjectKillChainPhasesView killChainPhases={malware.killChainPhases} />
              <Typography
                variant="h3"
                gutterBottom={true}
                style={{ marginTop: 20 }}
              >
                {t('Capabilities')}
              </Typography>
              <List>
                {capabilities.map((capability) => (
                  <ListItem key={capability} dense={true} divider={true}>
                    <ListItemIcon>
                      <BasketOutline />
                    </ListItemIcon>
                    <ListItemText
                      primary={
                        <ItemOpenVocab
                          type="malware-capabilities-ov"
                          value={capability}
                        />
                      }
                    />
                  </ListItem>
                ))}
              </List>
            </Grid>
          </Grid>
          <Divider />
          <StixDomainObjectNestedEntities
            entityId={malware.id}
            entityType="Malware"
          />
        </Paper>
      </>
    );
  }
}

MalwareDetailsComponent.propTypes = {
  malware: PropTypes.object,
  classes: PropTypes.object,
  t: PropTypes.func,
  fld: PropTypes.func,
};

const MalwareDetails = createFragmentContainer(MalwareDetailsComponent, {
  malware: graphql`
    fragment MalwareDetails_malware on Malware {
      id
      description
      malware_types
      is_family
      first_seen
      last_seen
      architecture_execution_envs
      implementation_languages
      capabilities
      killChainPhases {
        id
        entity_type
        kill_chain_name
        phase_name
        x_opencti_order
      }
      objectLabel {
        id
        value
        color
      }
    }
  `,
});

export default compose(inject18n, withStyles(styles))(MalwareDetails);
